<template>
  <el-dialog :title="title" :visible.sync="openAudit" width="1200px" append-to-body>
    <el-row>
      <el-col :span="24" class="card-box">
        <el-card>
          <div slot="header">
            <span><i class="el-icon-goods"></i> 商品信息</span>
          </div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <table cellspacing="0" style="width: 100%;">
              <tbody>
                <tr>
                  <td class="el-table__cell"><div class="cell">商品货号</div></td>
                  <td class="el-table__cell"><div class="cell">{{ formAudit.sku }}</div></td>
                  <td class="el-table__cell"><div class="cell">商品标题</div></td>
                  <td class="el-table__cell"><div class="cell">{{ formAudit.title }}</div></td>
                  <td class="el-table__cell"><div class="cell">商品副标题</div></td>
                  <td class="el-table__cell"><div class="cell">{{ formAudit.subTitle }}</div></td>
                </tr>
                <tr> 
                  <td class="el-table__cell"><div class="cell">关键字</div></td>
                  <td class="el-table__cell"><div class="cell">{{ formAudit.keywords }}</div></td>
                  <td class="el-table__cell"><div class="cell">价格</div></td>
                  <td class="el-table__cell"><div class="cell">{{ formAudit.price }}</div></td>
                  <td class="el-table__cell"><div class="cell">销量</div></td>
                  <td class="el-table__cell"><div class="cell">{{ formAudit.sale }}</div></td>
                </tr>
                <tr>
                  <td class="el-table__cell"><div class="cell">图片</div></td>
                  <td class="el-table__cell"><div class="cell"><image-preview :src="formAudit.pic" :width="50" :height="50"/></div></td>
                  <td class="el-table__cell"><div class="cell">画册图片</div></td>
                  <td class="el-table__cell"><div class="cell"><image-preview :src="formAudit.albumPics" :width="50" :height="50"/></div></td>
                </tr>
              </tbody>
            </table>
          </div>
        </el-card>
      </el-col>
    
      <el-col :span="24" class="card-box">
        <el-card>
          <div slot="header">
            <span><i class="el-icon-goods"></i> 商品属性值</span>
          </div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <el-table :data="productAttributeList" :border="true">
              <el-table-column label="主键" align="center" prop="id" />
              <el-table-column label="商品货号" align="center" prop="sku" />
              <el-table-column label="商品标题" align="center" prop="title" />
              <el-table-column label="可选值列表，以逗号隔开" align="center" prop="inputList" />
            </el-table>
          </div>
        </el-card>
      </el-col>

      <el-col :span="24" class="card-box">
        <el-card>
          <div slot="header">
            <span><i class="el-icon-goods"></i> 商品规格</span>
          </div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <el-table :data="productSkuList" :border="true">
              <el-table-column label="主键" align="center" prop="id" />
              <el-table-column label="商品货号" align="center" prop="sku" />
              <el-table-column label="商品规格" align="center" prop="skuCode" />
              <el-table-column label="图片" align="center" prop="pic" width="100">
                <template slot-scope="scope">
                  <image-preview :src="scope.row.pic" :width="50" :height="50"/>
                </template>
              </el-table-column>
              <el-table-column label="价格" align="center" prop="price" />
              <el-table-column label="商品销售属性" align="center" prop="spData" />
              <el-table-column label="销量" align="center" prop="sale" />
            </el-table>
          </div>
        </el-card>
      </el-col>

      <el-col :span="24" class="card-box">
        <el-card>
          <div slot="header">
            <span><i class="el-icon-s-check"></i> 审核商品</span>
          </div>
          <div class="el-table el-table--enable-row-hover el-table--medium">
            <el-form ref="formAudit" :model="formAudit" label-width="80px">
              <el-form-item label="审核状态" prop="auditStatus">
                <el-radio-group v-model="formAudit.auditStatus">
                  <el-radio
                    v-for="dict in dict.type.audit_status_part"
                    :key="dict.value"
                    :label="dict.value"
                  >{{dict.label}}</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="审核备注" prop="auditRemark" v-if="formAudit.auditStatus==3">
                <el-input v-model="formAudit.auditRemark" placeholder="请输入审核备注" type="textarea"/>
              </el-form-item>
            </el-form>
          </div>
        </el-card>
      </el-col>
    </el-row>

    
    <div slot="footer" class="dialog-footer" style="text-align: center;">
      <el-button type="primary" @click="submitFormAudit">确 定</el-button>
      <el-button @click="cancelAudit">取 消</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { getProduct,auditProduct } from "@/api/supermarket/product";

export default {
  name: "AuditProductForm",
  dicts: ['audit_status','audit_status_part'],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 弹出层标题
      title: "",
      // 是否显示审核弹出层
      openAudit: false,
      // 表单参数
      formAudit: {},
      // 商品属性列表
      productAttributeList:[],
      // 商品规格列表
      productSkuList: [],
    };
  },
  methods: {
    /** 审核按钮操作 */
    handleAudit(row) {
      this.resetAudit();
      this.title = "审核商品信息";
      this.openAudit = true;
      getProduct(row.product.id).then(response => {
        this.formAudit = response.data.product;
        this.productAttributeList = response.data.productAttributeList;
        this.productSkuList = response.data.productSkuList;
      });
    }, 
    /** 提交审核按钮 */
    submitFormAudit() {
      this.loading = true;
      if(this.formAudit.auditStatus == 2){
        this.formAudit.auditRemark = "审核通过";
      }else if(this.formAudit.auditStatus == 3){
        if(this.formAudit.auditRemark==""){
          this.$modal.msgError("请在审核备注中输入原因！");
          return;
        }
      }
      auditProduct(this.formAudit).then(response => {
        this.$parent.getList();
        this.resetAudit();
        this.loading = false;
        this.openAudit = false;
      });
    },
    // 取消按钮
    cancelAudit() {
      this.openAudit = false;
      this.resetAudit();
    },
    // 重置审核表单
    resetAudit() {
      this.formAudit = {
        sku: null,
        title: null,
        auditStatus: null,
        auditRemark: null
      };
      this.resetForm("formAudit");
    },
  }
}
</script>